@extends('default.layouts.app')

@section('content')
<form class="form-horizontal" id="myForm">
   {{ csrf_field() }}
  <div class="form-group">
    <div class="col-sm-12">
        <textarea class="form-control" name="editContent" rows="8">
            But on the general effectiveness of the social cure, Rosenberg is less persuasive. Join the Club is filled with too much irrelevant detail and not enough exploration of the social and biological factors that make peer pressure so powerful. The most glaring flaw of the social cure as it’s presented here is that it doesn’t work very well for very long. Rage Against the Haze failed once state funding was cut. Evidence that the LoveLife program produces lasting changes is limited and mixed.
        </textarea>

    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button id="submitBtn" type="button" class="btn btn-default">Explode</button>
    </div>
  </div>
</form>
 
<div class="panel panel-default">
    <div class="panel-body" id="resultContent">

    </div>
</div>

<script type="text/javascript">
    var requestUrl = '/tools/ajax.html';
// Specify a function to execute when the DOM is fully loaded.
$( document ).ready(function() {

    //页面加载完毕，结束进度条
    // TopProgressBar.finish();

    $("#submitBtn").click(function(){

        var dataParams = $('#myForm').serialize();
        var jqxhr = $.post( requestUrl, dataParams, function() {
            console.log( "post success" );
        }, 'json');
        jqxhr.done(function(result) {
            console.log( "second success" );
            console.log( result.msg );
            console.log( result.code );
            // var html = _(data).forEach(function(n) {
            //   console.log(n);
            // });
            var html = '<table class="table">';
            html += '<tr> <td>单词</td> <td>频率</td> <td>释义</td> </tr>';
            _.forIn(result.data.data, function(value, key) {
                html += '<tr> ';
                html += '<td> ' + key + '</td>';
                html += '<td> ' + value + '</td>';
                html += '<td> ' + '--' + '</td>';
                html += '</tr>';
            });
            html += '</table>';
            $('#resultContent').html(html);
        });
        jqxhr.fail(function() {
            console.log( "error" );
        });

    });

});
</script>

@endsection